<template>
	<view class="call">

		<view class="header">
			<uni-icons class="icon" type="back" size="50rpx" color="#fff" @click="backHandler"></uni-icons>

			<view>{{ elem?.companyInfo[0].title }}</view>
		</view>

		<view class="all" @click="toDeatail(elem?._id)">
			<view class="null"></view>
			<view class="section">
				<view class="message">
					<view class="titles">
						<view>{{ elem?.title }}</view>
						<text>{{ elem?.salary }}</text>
					</view>
					<view class="text">
						<view>{{ elem?.workAddress }}</view>
						&nbsp;| &nbsp;
						<view>{{ elem?.workRange }}</view>
						&nbsp;| &nbsp;
						<view>{{ elem?.education }}</view>
					</view>
					<view class="bton">
						<view v-for="(item, index) in elem?.welfare" :key="index">
							{{ item }}
						</view>
					</view>
					<view class="line"></view>
					<view class="bottom" @click.stop="toCompeny(elem?.companyInfo[0]._id)">

						<image :src="elem?.companyInfo[0].logoUrl" mode=""></image>
						<view class="botm">
							<text>{{ elem?.companyInfo[0].title }}</text>
							<view>
								{{ elem?.companyInfo[0].companyType }}
								{{ elem?.companyInfo[0].companyNumber }}
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="time">{{ time }}</view>
			<view class="logs">
				<view>
					<view>我对贵公司的职业很感兴趣,能否进一步沟通。</view>
					<image src="../../static/avatar.jpg" mode=""></image>
				</view>
				<view v-for="(item, index) in callList" :key="index" class="item">
					<view>{{ item.val }}</view>
					<image src="../../static/avatar.jpg" mode=""></image>
				</view>
			</view>
		</view>

		<view class="footer">
			<view class="inpt">
				<input type="text" placeholder="  请输入..." confirm-type="search" @confirm="BotnclickHanlder"
					v-model="val" />
			</view>
			<view class="botn" @click="BotnclickHanlder">发送</view>
		</view>

	</view>
</template>

<script>
	export default {
		name: "call",
		data() {
			return {
				elem: null,
				val: "",
				dispatchList: JSON.parse(window.localStorage.getItem("dispatchList")) || [], //发送信息列表
				time: null,
				callList: [], //当前聊天界面信息
				workid: ''
			};
		},
		onLoad(option) {
			let dt = new Date();
			var y = dt.getFullYear();
			var mt = (dt.getMonth() + 1).toString().padStart(2, "0");
			var day = dt.getDate().toString().padStart(2, "0");
			var h = dt.getHours().toString().padStart(2, "0");
			var m = dt.getMinutes().toString().padStart(2, "0");
			this.time = y + "-" + mt + "-" + day + " " + h + ":" + m;
			// console.log(this.time);
			this.workid = option.workid;
			this.callList = this.dispatchList.filter(item => (
				item._id == this.workid
			));
			if (option.workid) {
				uni.request({
						url: `https://yw.52kfw.cn/api/v1/company/work-info?workid=${option.workid}`
					})

					.then((res) => {
						console.log(res);
						this.elem = res.data.data;
						this.toLearnList = [...res.data.data.description];
					})
					.catch(() => {
						return;
					});
			}
		},
		methods: {
			backHandler() {
				uni.navigateBack()
			},
			//跳转公司详细页
			toCompeny(id) {
				uni.navigateTo({
					url: '/pages/firm/firm?id=' + id
				})
				
			},
			//跳转岗位详细
			toDeatail(id) {
				uni.navigateTo({
					url: '/pages/detail/detail?id=' + id
				});
				
			},

			BotnclickHanlder() {
				if (this.val.trim() === "") {
					uni.showToast({
						title: '内容不能为空',
						icon: 'none'
					})

				} else {

					this.dispatchList = [
						...this.dispatchList,
						{
							val: this.val,
							id: this.$route.query.id,
							tiems: Date.now(),
							...this?.elem,
						},
					];

					this.val = "";
				}
			},
		},
		watch: {
			val(newval) {
				this.val = newval;
			},
			dispatchList: function(newVal) {
				console.log(this.workid);
				window.localStorage.setItem("dispatchList", JSON.stringify(newVal));
				this.callList = this.dispatchList.filter(item => (
					item._id == this.workid
				))

			},
		},
	};
</script>

<style lang="scss">
	.call {
		width: 100vw;
		box-sizing: border-box;
		background-color: #f4f4f4;
		height: 100vh;

		.footer {
			position: fixed;
			width: 100%;
			padding: 0 40rpx;
			position: fixed;
			bottom: 0;
			right: 0;
			left: 0;
			background-color: #fff;
			height: 100rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			box-sizing: border-box;

			.inpt {
				width: 85%;

				input {
					width: 100%;
					border: none;
					border-radius: 20rpx;
					background-color: #f4f4f4;
					height: 60rpx;
					text-indent: 30rpx;
				}
			}

			.botn {
				// width: 15%;
				font-size: 28rpx;
				color: #5fae53;
			}
		}

		.header {
			position: fixed;
			top: 0;
			right: 0;
			left: 0;
			background-color: #5fae53;
			width: 100%;
			display: flex;
			height: 150rpx;
			justify-content: center;
			align-items: center;
			color: #fff;
			font-size: 36rpx;
			// font-weight: bold;

			.icon {
				position: absolute;
				left: 30rpx;
				top: 50%;
				margin-top: -24rpx;
			}
		}

		.all {
			.time {
				width: 240rpx;
				//   padding: 2rpx;
				height: 40rpx;
				background: #dcdcdc;
				border-radius: 20rpx;
				margin: 20rpx auto;
				color: #fff;
				text-align: center;
				line-height: 40rpx;
				transform: scale(0.9);
				font-size: 24rpx;
			}

			.logs {
				width: 100%;
				padding: 0 20rpx;
				display: flex;
				flex-direction: column;
				align-items: flex-end;
				margin-top: 40rpx;
				padding-bottom: 120rpx;

				.item {
					// background: red;
					margin-top: 10rpx;

					view {
						display: -webkit-box;
						width: auto;

						image {
							width: 60rpx;
							height: 60rpx;
							border-radius: 50%;
							margin-right: 20rpx;
						}
					}
				}

				view {
					width: 65%;
					display: flex;
					justify-content: right;
					align-items: center;

					image {
						width: 60rpx;
						height: 60rpx;
						border-radius: 50%;
					}

					view {
						background-color: #95ec54;
						margin: 10rpx;
						font-size: 26rpx;
						border-radius: 10rpx;
						padding: 10rpx 12rpx;
						text-align: start;
					}
				}
			}

			.null {
				height: 180rpx;
				width: 100%;
			}

			.section {
				display: flex;
				flex-wrap: wrap;
				justify-content: center;

				.message {
					width: 690rpx;
					height: 314rpx;
					background: #ffffff;
					box-shadow: 0rpx 6rpx 22rpx 0rpx rgba(1, 64, 153, 0.22);
					border-radius: 20rpx;
					padding: 10rpx 20rpx;
					box-sizing: border-box;

					.titles {
						display: flex;
						justify-content: space-between;
						align-items: center;
						font-size: 36rpx;
						font-family: SourceHanSansCN;
						font-weight: 400;
						color: #333333;
						line-height: 70rpx;

						text {
							color: #5fae53;
						}
					}

					.text {
						display: flex;
						text-align: start;
						align-items: center;
						color: #999;
						margin-bottom: 10rpx;

						view {
							font-size: 24rpx;
						}
					}

					.bton {
						display: flex;
						flex-wrap: wrap;

						view {
							padding: 2rpx 6rpx;
							background-color: #f4f4f4;
							margin-right: 10rpx;
							border-radius: 10rpx;
							font-size: 24rpx;
						}
					}

					.line {
						width: 100%;
						border-top: 2rpx solid #f3f3f3;
						margin: 30rpx 0 20rpx 0;
					}

					.bottom {
						display: flex;
						align-items: center;
						justify-content: start;

						image {
							width: 60rpx;
							height: 60rpx;
							border-radius: 50%;
							margin-right: 20rpx;
						}

						.botm {
							text-align: start;

							text {
								font-size: 28rpx;
								font-family: SourceHanSansCN;
								font-weight: 400;
								color: #333333;
							}

							view {
								color: #999;
								font-size: 24rpx;
							}
						}
					}
				}
			}
		}
	}
</style>
